<template>
  <div class="chat-input">
    <div class="input-toolbar">
      <el-popover placement="top" :width="300" trigger="click" popper-class="emoji-popover" :teleported="true">
        <template #reference>
          <div class="emoji-button">
            <el-button :icon="ChatDotSquare" text>表情</el-button>
          </div>
        </template>
        <div class="emoji-container">
          <div class="emoji-grid">
            <span v-for="(emoji, index) in emojiList" :key="index" class="emoji-item" @click="insertEmoji(emoji)" :title="emoji">
              {{ emoji }}
            </span>
          </div>
        </div>
      </el-popover>
      <div class="image-upload-button">
        <el-button :icon="Picture" text @click="handleImageButtonClick" :disabled="isUploading">
          {{ isUploading ? '上传中...' : '图片' }}
        </el-button>
        <input type="file" ref="imageInput" @change="handleImageUpload" accept="image/*" style="display: none;" />
      </div>
    </div>
    <el-input
      v-model="messageInput"
      type="textarea"
      :rows="inputRows"
      placeholder="请输入消息..."
      @keyup.enter.prevent="handleEnterPress"
      maxlength="500"
      :show-word-limit="true"
      resize="vertical"
      class="resizable-input"
      :disabled="isUploading || isSending"
    />
    <div class="bottom-toolbar">
      <el-progress v-if="isUploading" :percentage="uploadProgress" :stroke-width="2" class="upload-progress" />
      <el-button
        type="primary"
        @click="debouncedSend"
        class="send-button"
        :loading="isSending"
        :disabled="!messageInput.trim() || isUploading"
      >
        {{ isSending ? '发送中...' : '发送' }}
      </el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onUnmounted } from 'vue';
import { ChatDotSquare, Picture } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import emoji from '/@/assets/emoji.json';
import { useDebounceFn } from '@vueuse/core';

const { inputRows = 3 } = defineProps<{
  inputRows?: number;
}>();

const emit = defineEmits(['send', 'imageUpload']);

const messageInput = ref('');
const imageInput = ref<HTMLInputElement | null>(null);
const emojiList = ref<string[]>(emoji);
const isUploading = ref(false);
const isSending = ref(false);
const uploadProgress = ref(0);

// 使用防抖函数包装发送消息
const debouncedSend = useDebounceFn(() => {
  if (messageInput.value.trim() && !isSending.value && !isUploading.value) {
    isSending.value = true;
    emit('send', messageInput.value);
    messageInput.value = '';
    setTimeout(() => {
      isSending.value = false;
    }, 500);
  }
}, 300);

const handleEnterPress = (e: KeyboardEvent) => {
  if (e.shiftKey) return; // 允许Shift+Enter换行
  debouncedSend();
};

const insertEmoji = (emoji: string) => {
  if (messageInput.value.length + emoji.length <= 500) {
    messageInput.value += emoji;
  } else {
    ElMessage.warning('消息长度超出限制');
  }
};

const handleImageButtonClick = () => {
  if (!isUploading.value) {
    imageInput.value?.click();
  }
};

const simulateProgress = () => {
  uploadProgress.value = 0;
  const interval = setInterval(() => {
    if (uploadProgress.value < 90) {
      uploadProgress.value += Math.random() * 10;
    }
  }, 200);
  return interval;
};

const handleImageUpload = async (event: Event) => {
  const files = (event.target as HTMLInputElement).files;
  if (files && files[0]) {
    const file = files[0];
    // 检查文件大小（限制为5MB）
    if (file.size > 5 * 1024 * 1024) {
      ElMessage.error('图片大小不能超过5MB');
      return;
    }
    
    // 检查文件类型
    if (!file.type.startsWith('image/')) {
      ElMessage.error('只能上传图片文件');
      return;
    }

    isUploading.value = true;
    const progressInterval = simulateProgress();
    
    try {
      await emit('imageUpload', file);
      uploadProgress.value = 100;
      setTimeout(() => {
        uploadProgress.value = 0;
      }, 500);
    } catch (error) {
      ElMessage.error('图片上传失败');
    } finally {
      clearInterval(progressInterval);
      isUploading.value = false;
    }
  }
  // 清空input的value，确保可以重复选择同一文件
  if (imageInput.value) {
    imageInput.value.value = '';
  }
};

onUnmounted(() => {
  messageInput.value = '';
});
</script>

<style lang="scss" scoped>
.chat-input {
  padding: 15px;
  border-top: 1px solid var(--el-border-color-light);
  display: flex;
  flex-direction: column;
  gap: 12px;
  background-color: var(--el-bg-color);
  transition: all 0.3s ease;

  .input-toolbar {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 0 5px;

    .emoji-button,
    .image-upload-button {
      display: flex;
      align-items: center;

      .el-button {
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 8px 12px;
        font-size: 14px;
        color: var(--el-text-color-regular);
        transition: all 0.3s ease;
        
        &:hover {
          color: var(--el-color-primary);
          background-color: var(--el-color-primary-light-9);
        }

        &:disabled {
          opacity: 0.6;
          cursor: not-allowed;
        }
      }
    }
  }

  .resizable-input {
    :deep(.el-textarea__inner) {
      min-height: 60px;
      max-height: 150px;
      transition: all 0.3s ease;
      border-radius: 8px;
      border: 1px solid var(--el-border-color);
      box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
      resize: vertical;
      padding: 10px;
      line-height: 1.5;
      font-size: 14px;
      background-color: var(--el-bg-color);
      color: var(--el-text-color-primary);

      &:disabled {
        background-color: var(--el-disabled-bg-color);
        cursor: not-allowed;
      }

      &::placeholder {
        color: var(--el-text-color-placeholder);
      }
    }
  }

  .bottom-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;

    .upload-progress {
      flex: 1;
      margin-right: 12px;
    }

    .send-button {
      min-width: 100px;
      height: 36px;
      font-size: 14px;
      padding: 0 20px;
      border-radius: 18px;
      transition: all 0.3s ease;

      &:disabled {
        cursor: not-allowed;
        opacity: 0.6;
      }
    }
  }
}

.emoji-container {
  padding: 12px;
  margin: 0 auto;
  max-height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
  width: 100%;
  box-sizing: border-box;
  background-color: var(--el-bg-color);
  border-radius: 4px;

  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background-color: var(--el-border-color-lighter);
    border-radius: 3px;
  }

  .emoji-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    width: 100%;

    .emoji-item {
      cursor: pointer;
      font-size: 24px;
      width: 36px;
      height: 36px;
      text-align: center;
      border-radius: 4px;
      transition: all 0.2s;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
      user-select: none;

      &:hover {
        background-color: var(--el-color-primary-light-9);
        transform: scale(1.1);
      }
    }
  }
}

:deep(.emoji-popover) {
  padding: 0 !important;
  border: none !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1) !important;
  z-index: 9999 !important;
  background-color: var(--el-bg-color) !important;
  border: 1px solid var(--el-border-color) !important;

  .el-popper__arrow::before {
    background-color: var(--el-bg-color) !important;
    border-color: var(--el-border-color) !important;
  }
}

:deep(.dark-mode) {
  .chat-input {
    background-color: var(--el-bg-color-overlay);
    border-top-color: var(--el-border-color-dark);

    .input-toolbar {
      .emoji-button,
      .image-upload-button {
        .el-button {
          color: var(--el-text-color-regular);
          
          &:hover {
            color: var(--el-color-primary);
            background-color: var(--el-color-primary-light-3);
          }
        }
      }
    }

    .resizable-input {
      :deep(.el-textarea__inner) {
        background-color: var(--el-bg-color);
        border-color: var(--el-border-color-dark);
        color: var(--el-text-color-primary);

        &:disabled {
          background-color: var(--el-disabled-bg-color);
        }
      }
    }
  }

  .emoji-container {
    background-color: var(--el-bg-color);

    .emoji-grid .emoji-item:hover {
      background-color: var(--el-color-primary-light-3);
    }
  }

  :deep(.emoji-popover) {
    background-color: var(--el-bg-color) !important;
    border-color: var(--el-border-color-dark) !important;

    .el-popper__arrow::before {
      background-color: var(--el-bg-color) !important;
      border-color: var(--el-border-color-dark) !important;
    }
  }
}
</style>